<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间轴</title>
    <script src="../echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>    
</body>
<script>
    let mychart = echarts.init(document.getElementById("main"))
    let option = {
        baseOption:{
            timeline:{
                data:['2017','2018','2019']
            },
            title:{
                subtext:""
            },
            grid:{},
            xAxis:[
                {
                    'type':'category',
                    'data':["A公司",'B公司','C公司']
                }
            ],
            tooltip:{
                axisPointer:"axis",
                type:"shadow"
            },
            yAxis:[
                {
                    'type':'value'
                }
            ],
            series:[
                {
                    type:'bar'
                }
            ]
        },
        options:[
            {
                title:{text:"2017年销售情况"},
                series:[{data:[300,500,450]}]
            },
            {
                title:{text:"2018年销售情况"},
                series:[{data:[500,600,1000]}]
            },
            {
                title:{text:"2019年销售情况"},
                series:[{data:[650,700,950]}]
            }
        ]
    }
    mychart.setOption(option)
</script>
</html>